<template>
	<view class="container">
		<!-- 头部 banner -->
		<swiper class="swiper" indicator-dots="true"  indicator-color="#ccc" indicator-active-color="#FF8106" style="height: 90vh;">
		   <swiper-item v-for="(item, index) in bannerList" :key="index">
			   <!-- 首图 -->
		       <view class="banner">
					<image class="banner-img" :src="item.adPic" ></image>
		       </view>
			   <!-- 描述文字 -->
			   <view class="description">
					{{item.adText}}
			   </view>
			   <!-- 二维码展示区域 -->
			   <view class="qrcode">
			   	<view class="qrcode-container">
			   		<view class="qrcode-case">
			   			<image class="qrcode-img" :src="item.chatCode" ></image>
			   		</view>
			   	</view>
			   </view>
			   
			   <view class="qrcode-info">
			   	扫码，添加老师微信
			   </view>
			   <!-- 二维码描述 -->
			   <view class="qrcode-description">
			   	扫描此二维码可获取更多信息或进行相关操作。
			   </view>
		      </swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		queryAd
	} from '../api/index.js';
	export default {
		data() {
			return {
				bannerList:[],
				// 替换为实际的 banner 图片链接
				bannerImg: 'https://www.afbeijing.net/static_resources/assets/hktj.jpg',
				// 替换为实际的二维码图片链接
				qrcodeImg: 'https://www.afbeijing.net/static_resources/assets/erweima1.jpg'
			};
		},
		onReady() {
			this.getList()
		},
		methods: {
			//查询列表
			getList() {
				//接口后期打开
				queryAd().then(response => {
					console.log(response)
					if (response.code === 0) {
						this.bannerList = response.data
						// this.data.case = response.data
					} else {
						uni.$u.toast(response.msg)
					}
				}).catch(errors => {
					// uni.$u.toast(errors)
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		padding: 20px;
		text-align: center;
	}
	.banner{
		display: flex;
		justify-content: center;
		background: #77491A;
		border-radius: 40rpx;
	}
	.banner-img{
		background: #77491A;
		border-radius: 40rpx;
		width: 690rpx;
		height: 400rpx;
	}
	.description {
		text-align: center;
		margin-top: 20px;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.qrcode{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.qrcode-container {
		width: 364rpx;
		height: 520rpx;
		margin-top: 10%;
		padding-top: 10%;
		background-image: url(#{$bgImageUrl}/assets/ewmkuang.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.qrcode-case{
		width: 320rpx;
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.qrcode-img{
		width: 270rpx;
		height: 270rpx;
	}
	.qrcode-info{
		margin-top: -7%;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.qrcode-description {
		margin-top: 20px;
		font-size: 14px;
		color: #666;
		text-align: center;
	}
</style>